{% extends 'base.html' %}
<head>
 <script src="../templates/js/go.js"></script>
 <script type="text/javascript" src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
 <script crossorigin="anonymous" integrity="sha512-YybopSVjZU0fe8TY4YDuQbP5bhwpGBE/T6eBUEZ0usM72IWBfWrgVI13qfX4V2A/W7Hdqnm7PIOYOwP9YHnICw==" src="https://lib.baomitu.com/socket.io/3.1.2/socket.io.js"></script>
</head>
{% block main %}
<div class="container">
<form class="form-horizontal"  method="post" action="/addtask/{{  taskinfo.id}}">
    <div class="panel panel-default">
  <div class="panel-heading">
      <span class="glyphicon glyphicon-info-sign"></span>
      发布任务基本信息
  </div>
     <div class="panel-body">
         <table class="table table-bordered">
             <tbody>
             <tr>
                 <td>项目名称:</td>
                 <td>{{ taskinfo.project }}</td>
             </tr>
             <tr>
                 <td>环境:</td>
                 <td>{{ prinfo.env }}</td>
             </tr>
             <tr>
                 <td>仓库地扯</td>
                 <td>{{ prinfo.repo }}</td>
             </tr>
             <tr>
                 <td>线上路径</td>
                 <td>{{ prinfo.path }}</td>
             </tr>
                          <tr>
                 <td>发布版本</td>
                 <td>{{ taskinfo.tag }}</td>
             </tr>
                                       <tr>
                 <td>UID</td>
                 <td>{{ taskinfo.uid }}</td>
             </tr>
                                                    <tr>
                 <td>版本描述</td>
                 <td>{{ taskinfo.versioninfo }}</td>
             </tr>
                                       <tr>
                 <td>关联的服务器</td>
                 <td>{{ prinfo.servers}}</td>
             </tr>
                                                    <tr>
                 <td>执行状态</td>
                 <td>{{ taskinfo.status }}</td>
             </tr>
             </tbody>
         </table>
     </div>

        <div class="panel-heading">
                <div class="form-group">
       <a class="btn btn-primary" href="/run/{{  taskinfo.id }}">发布</a>
      <a class="btn btn-primary" href="/run/{{  taskinfo.id }}?t=999">初使化</a>
      <button type="button" class="btn btn-primary" onclick="create()">刷新</button>
  </div>

      <span class="glyphicon glyphicon-info-sign"></span>
      执行状态
  </div>
 <div id="diagramDiv" style="width: 100%; height: 350px; background-color: #DAE4E4"></div>
    </div>
</form>
    </div>
    <div class="form-group">
    <div class="col-sm-10">
   <div class='series'>
       <div class="outline">
           <div class="series">
               <div class="line">
                   <hr>
               </div>
           </div>
       </div>
       </div>
   </div>
    </div>
</div>
<script>
alert("test");
$(document).ready(function () {
    namespace = '/dcenter';
    const socket = io.connect(location.protocol + '//' + document.domain + ':' + location.port + namespace);
    socket.on('dcenter',
        function (self) {
        for (let i = 0; i < res.length; i++)
        {
            const host = res[i];
            console.log(host);
        }
    });
});
alert("test1");
</script>

<script>
  function create() {
      const $ = go.GraphObject.make;
    const diagram = $(go.Diagram, "diagramDiv", {
        layout: $(go.TreeLayout, {
            angle: 0,
            nodeSpacing: 20,
            layerSpacing: 70
        })
    });

    diagram.nodeTemplate = $(go.Node, "Auto",
        $(go.Shape, {
            figure: "RoundedRectangle",
            fill: 'lightgray',
            stroke: 'lightgray'
        }, new go.Binding("figure", "figure"), new go.Binding("fill", "color"), new go.Binding("stroke", "color")),
        $(go.TextBlock, {margin: 8}, new go.Binding("text", "text"))
    );

    diagram.linkTemplate = $(go.Link,
        {routing: go.Link.Orthogonal},
        $(go.Shape, {stroke: 'lightgray'}, new go.Binding('stroke', 'link_color')),
        $(go.Shape, {toArrow: "OpenTriangle", stroke: 'lightgray'}, new go.Binding('stroke', 'link_color')),
        $(go.TextBlock, {font: '8pt serif', segmentOffset: new go.Point(0, -10)}, new go.Binding("text", "link_text"))
    );

    const xhr = new XMLHttpRequest();
    xhr.responseType = 'json';
    xhr.open('GET','http://127.0.0.1:5000/status/{{ taskinfo.id }}');
    xhr.send()
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
            if (xhr.status >= 200 && xhr.status < 300) ;
                diagram.model = new go.TreeModel(xhr.response);
        }
    }
            // body...
        }
    // console.log(typeof xhr.response);
</script>



</form>
{% endblock %}